<template>
    <div class="login">
        <div class="login-con">
            <!-- 顶部切换 -->
            <ul class="menu-tab">
                <li v-for="item in menuData" :key="item.id" :class="{ current: item.current }" @click="clickMenu(item)">
                    {{ item.txt }}
                </li>
            </ul>

            <!-- 表单部分 -->
            <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
                <!-- 修改提示文字 并且修改type类型 与v-model绑定的数据 并且添加类名-->
                <!-- 修改邮箱输入框的prop属性为username  -->
                <el-form-item prop="username" class="item-from">
                    <label for="username">邮箱</label>
                    <el-input v-model="ruleForm.username" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item prop="password" class="item-from">
                    <label for="password">密码</label>
                    <el-input id="password" type="password" v-model="ruleForm.password" autocomplete="off" minlength="6"
                        maxlength="20"></el-input>
                </el-form-item>
                <!-- 这里对于注册是没有重复密码的 所以我们需要对其判断 -->
                <el-form-item prop="passwords" class="item-from" v-show="model === 'register'">
                    <label>重复密码</label>
                    <el-input type="password" v-model="ruleForm.passwords" autocomplete="off" minlength="6"
                        maxlength="20"></el-input>
                </el-form-item>
                <!-- 2.页面中按钮添加禁用属性 -->
                <el-button @click="submitForm(ruleFormRef)" type="danger" class="login-btn block" :disabled="btn">{{
                    model === "login" ? "登录" : "注册" }}</el-button>

            </el-form>
            <!-- 表单部分 -->
        </div>
    </div>
</template>

<script setup lang="ts">
//初始化部分
//导入
import { reactive, ref, watch, onMounted } from 'vue';
//导入验证邮箱工具
import * as verification from "../../util/verification.js"
//导入饿了么插件
import { ElMessage, FormInstance } from "element-plus";

//引入api封装的请求 
import link from '../../api/link.js';

// 引用 md5 代码
import useMd5 from "../../hook/useMd5.js"

//引用 路由跳转
import { useRouter } from "vue-router"

let router = useRouter()

const ruleFormRef = ref<FormInstance>();
/* 
    创建变量 reactive定义引用数据类型 这里定义的是切换状态
*/

const menuData = reactive([
    /*
    顶部切换的变量
    txt:显示当前状态文本
    current:控制css样式的boolean值
    type:现在所处的状态
     */
    { 'txt': '登录', current: true, type: 'login' },
    { 'txt': '注册', current: false, type: 'register' },
])

//定义一个数据 表示当前状态 inp 绑定的值
const model = ref("login")

/* 
  顶部切换声明函数
*/

//切换模块
const clickMenu = (data: any) => {
    //tab 切换
    menuData.forEach((elem) => {
        elem.current = false
    });
    //让点击的是哪一项变成选中状态 因为定义的是 登录跟注册 只会有两个状态 
    data.current = true
    //将当前状态改成选中的状态
    model.value = data.type
}





//对登录功能实现
/* 
    rule:默认值?
    value:输入框的数据
    callback:收集错误信息提示
*/
/* 邮箱的触发条件 */
const checkUser = (rule: any, value: any, callback: any) => {
    //创建邮箱的正则来进行邮箱格式效验
    // let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
    if (!value) {
        return callback(new Error("邮箱不能为空!"));
    }
    //正则的验证方法 test 返回布尔值
    else if (verification.verificationEmail(value)) {
        return callback(new Error('邮箱不能为空!'))
    } else {
        callback()
    }
};
/* 对密码进行判断 */
const validatePass = (rule: any, value: any, callback: any) => {
    //书写密码正则
    // let reg = /^(?!\D+$)(?![^a-zA-Z]+$)\S{6,15}$/;// 验证密码 6至15位的字母+数字 
    if (value === "") {
        callback(new Error("密码不能为空"));
        //text是正则表达中的方法 具体返回布尔值
    } else if (verification.verificationPwd(value)) {
        callback(new Error("密码格式有误!6至15位的字母+数字"));
    }
    else {
        callback();
    }
};

/* 对密码再一次进行判断 */
const validatePass2 = (rule: any, value: any, callback: any) => {
    //因为登录没有重复密码,所以在登录的时候跳过
    if (model.value === 'login') { callback() }
    if (value === "") {
        callback(new Error("重复密码不能为空"));
    } else if (value !== ruleForm.password) {
        callback(new Error("两个密码不相同!"));
    } else {
        callback();
    }
};

//对elementplus提供的输入框绑定变量
const ruleForm = reactive({
    username: "",
    password: "",
    passwords: "",
});

// 触发验证的变量设置
/* 
    trigger:触发方式
    validator:触发函数的地方 后面是函数名

    这里是设置 设置 以何种方式触发 表单验证 默认是blur 失去焦点验证
    当触发了blur事件后就会调用前面的  函数从而进行表单验证
*/
const rules = reactive({
    password: [{ validator: validatePass, trigger: "blur" }],
    passwords: [{ validator: validatePass2, trigger: "blur" }],
    //修改名字 并且修改上面的函数名
    username: [{ validator: checkUser, trigger: "blur" }],
});


//表单提交
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            //判断是登录还是注册
            if (model.value == 'login') {
                console.log('登录');
                //----------------追加登录的请求发送------------------
                //登录成功后需要进行跳转
                link(`/register?uname=${ruleForm.username}&pwd=${useMd5(ruleForm.password).value}`, "get").then(ok => {
                    console.log(ok);
                    //结构出数据
                    let { data } = ok
                    //判断data长度不为0登录成功
                    if (data.length != 0) {
                        console.log('登录成功');
                        // 编程式导航跳转
                        router.push("/home")
                    } else {
                        console.log('登录失败');
                    }
                })
            } else {
                // 把要发送的数据拼装成一个对象
                let data = {
                    uname: ruleForm.username,
                    pwd: useMd5(ruleForm.password).value,
                    //id是自动添加的?
                };

                //将数据请求到json-serve中
                link("/register", "POST", data).then((ok) => {
                    // 判断数据是否为空 不为空表示注册成功
                    // 结构data 赋值给ok

                    let { data } = ok;
                    //创建数组
                    // let datas = ref([])
                    // console.log(data);
                    // Object.keys(data).forEach((item:any) =>{
                    //     datas += item.uname
                    // })
                    // console.log(datas);


                    // onMounted(()=>{
                    //     console.log(process.env.VUE_APP_XIAOMING);
                    // })
                    // 转成成数组判断长度即可知道对象是否为空
                    if (Object.keys(data).length !== 0) {
                        ElMessage("注册成功");
                        //将输入框的内容切换到登录
                        model.value = 'login'
                        //将上边的tab切换按钮变成登录
                        //还是老方法 遍历数组取消所有样式给需要的地方进行样式添加
                        menuData.forEach((elem) => {
                            elem.current = false
                        });
                        // 在把登录的变成true
                        menuData[0].current = true
                    } else {
                        ElMessage.error("注册失败");
                    }
                });
            }
        } else {
            console.log("error submit!");
            return false;
        }
    });
};
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
};



//登录功能
// 创建一个变量 用来控制按钮是否能点击
let btn = ref(true)

//对输入框的直接进行监听
watch(ruleForm, (newval) => {
    console.log(newval)
    // 判断是登录还是注册
    if (model.value == 'login') {
        // 登录
        if (newval.username != "" && newval.password != "") {
            btn.value = false
        } else {
            btn.value = true
        }
    } else {
        // 注册
        if (newval.username != "" && newval.password != "" && newval.passwords != "") {
            btn.value = false
        } else {
            btn.value = true
        }
    }
})



</script>

<style lang="scss">
.login {
    background-color: #000066; //深蓝色
    height: 100%;
}

html,
body,
#app {
    //设置页面100%高
    height: 100%;
}

// 设置切换样式开始
.login-wrap {
    width: 330px;
    margin: auto;
}

.menu-tab {
    text-align: center;

    li {
        display: inline-block;
        width: 88px;
        line-height: 36px;
        font-size: 14px;
        color: #fff;
        border-radius: 2px;
        cursor: pointer;
    }

    .current {
        background-color: rgba(255, 255, 255, 0.5); //白色半透明
    }
}

// 设置切换样式结束

// 表单样式
.demo-ruleForm {
    width: 30%;
    margin: 50px auto;

    label {
        display: block;
        margin-bottom: 3px;
        font-size: 14px;
        color: #fff;
    }

    .item-from {
        margin-bottom: 13px;
    }

    .block {
        display: block;
        width: 100%;
    }

    .login-btn {
        margin-top: 19px;
    }
}

// 表单样式
</style>